import {useDispatch, useSelector} from 'react-redux';
import {changeUserToken, changeUserInfo} from '@/store/userSlice';
import {useNavigate} from "react-router-dom";
import type {FormProps} from 'antd';
import {Button, Form, Input} from 'antd';
import {LockOutlined, UserOutlined} from '@ant-design/icons';
import {loginApi} from "@/axios/apis.ts"

type FieldType = {
    userName?: string;
    password?: string;
};


function Login() {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    // 登录
    const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
        const res = await loginApi(values)
        if (+res.code === 200) {
            dispatch(changeUserToken(res.data.token))
            dispatch(changeUserInfo(res.data))
            navigate('/', {replace: false})
        }
    };
    // const count = useSelector((state) => state.counter);
    return (
        <div className="login">
            <h1 className="title">欢迎登录金诚云平台</h1>
            <div className="login-form">
                <img width="144" src="https://sqzbx-test.etib.cn/homePage/public/img/logo.5bd7d2b0.png" alt="logo"
                     className="logo" />
                <h2>请输入登录信息</h2>
                <Form
                    name="login-form-ant"
                    labelCol={{span: 0}}
                    wrapperCol={{span: 24}}
                    style={{maxWidth: 600}}
                    onFinish={onFinish}
                    autoComplete="off"
                    layout="horizontal"
                >
                    <Form.Item<FieldType>
                        name="userName"
                        rules={[{required: true, message: '请输入工号'}]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="请输入工号" />
                    </Form.Item>

                    <Form.Item<FieldType>
                        name="password"
                        rules={[{required: true, message: '请输入密码'}]}
                    >
                        <Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
                    </Form.Item>
                    <Form.Item label={null}>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Login
